<template>
	<view class="content">
		<Header />
		
		<view class="banner" v-if="list.length">
			<u-swiper  :list="list"  indicator keyName="pic" @click="handleBannerClick" indicatorMode="line" height="750" indicatorActiveColor="#fff" indicatorInactiveColor="rgba(165, 165, 165, .4)" radius="0" circular></u-swiper>
		 </view> 
		<view class="con2" v-if="groupList.length">
			<view class="list">
				<view class="item" v-for="item in groupList" :key="item.id" @click="handleToGroupDetail(item.id)">
					<view class="image">
						<view class="t">
							拼团中
						</view>
						<image :src="item.product.pic" mode=""></image>
					</view>
					<view class="text">
						<view class="title clamp1">
							{{item.product.name}}
						</view>
						<view class="dec clamp1">
							{{item.product.subTitle}}
						</view>
						<view class="price">
							¥ {{item.groupPrice}}
						</view>
					</view>
				</view> 
			</view>
			<view class="index_more" @click="handleToGroupList">
				搜索更多
			</view>
			
		</view>
		
			<view class="bimg" style="margin-top: 20rpx;">
				<image :src="img1" mode="widthFix"></image>
			</view>
		<view class="con1">
			<view class="scroll-view_H">
				<view class="item" v-for="item in hotList" :key="item.id" @click="handleToDetail(item.id)">
					<view class="image">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="text">
						<view class="title clamp1">
							{{item.name}}
						</view>
						<view class="dec clamp1">
							{{item.subTitle}}
						</view>
						<view class="price">
							¥ {{item.price}}
						</view>
					</view>
				</view> 
			</view> 
			
			<view class="index_more" @click="handleToList">
				搜索更多
			</view>
		</view>
		
		<view class="con3">
			<view class="vip">
				<image src="../../static/logo_b.png" mode="" class="logo"></image>
				<view class="text">
					<text>享受会员权益</text>
					<image src="../../static/jt2.png" mode=""></image>
				</view>
			</view>
			<view class="bimg">
				<image :src="img2" mode="widthFix"></image>
			</view>
		</view>
		<view class="returnTop" @click="backToTop">
			返回顶部
			<image src="../../static/jt.png" mode=""></image>
		</view>
		<!-- <view class="yBox">
			<image src="../../static/y.png" mode=""></image>
		</view> -->
		
		<u-overlay :show="show">
			<view class="overlayBox">
				<view class="img" @click="handleToTanList">
					<image :src="tanImg" mode=""></image>
				</view>
				<view class="" @click="show = false">
					<u-icon name="close-circle" color="#fff" size="30"></u-icon>
				</view>
			</view>
		</u-overlay>
		
		<tabbar :index="0" 
		    class="u-tabbar__content"
		    ref="u-tabbar__content"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"
	export default {
		components:{
			tabbar
		},
		data() {
			return {
				tanImg:'',
				show:false,
				list:[], 
				title: 'Hello',
				groupList:[],
				hotList:[],
				newList:[],
				img2:'',
				img1:'',
				tanList:'',
			}
		},
		onLoad(option) {
			if(option.id){
				uni.setStorageSync('inviter',option.id)
			} 
			this.getAd()
			this.getContent()
			this.setPlaceholderHeight()
			this.getGroupList()
			this.getImg()
			
		},
		// 分享给个人
		onShareAppMessage() { 
			return {
				// title: uni.getStorageSync("common_info").shareText,
				// imageUrl: uni.getStorageSync("common_info").sharesImage,
				title:'',
				imageUrl:''
			}
		},
		//分享朋友圈
		onShareTimeline() { 
			return {
				// title: uni.getStorageSync("common_info").shareText,
				// imageUrl: uni.getStorageSync("common_info").sharesImage,
				title:'',
				imageUrl:''
			}
		},
		onShow() { 
			this.getTan()
		},
		methods: {  
			handleBannerClick(e){  
				if(this.list[e].url){
					uni.navigateTo({
						url:this.list[e].url
					})
				} 
			},
			handleToTanList(){
				uni.navigateTo({
					url:this.tanList.url
				})
			},
			getAd(){
				this.$http({
					url:"/home/getAdvertise",
					method:"get",
					data:{
						type:1
					}
				}).then(data=>{
					this.list = data
				})
			},
			getTan(){
				this.$http({
					url:"/home/getAdvertise",
					method:"get",
					data:{
						type:0
					}
				}).then(data=>{
					if(data.length){
						this.tanList = data[0]
						this.show = true
						this.tanImg = data[0].pic
					}
				})
			},
			getImg(){
				this.$http({
					url:"/umsContent/queryById",
					method:"get",
					data:{
						id:2
					}
				}).then(data=>{
					this.img1 = data.content
				})
				this.$http({
					url:"/umsContent/queryById",
					method:"get",
					data:{
						id:4
					}
				}).then(data=>{
					this.img2 = data.content
				})
			},
			backToTop() {
			  // 使用 uni.pageScrollTo 方法返回顶部
			  uni.pageScrollTo({
				scrollTop: 0, // 滚动到页面顶部
				duration: 300 // 动画时长为 300 毫秒
			  });
			},
			handleToList(){
				uni.navigateTo({
					url:"./list"
				})
			},
			handleToDetail(id){
				uni.navigateTo({
					url:`/pages/category/detail?id=${id}`
				})
			},
			handleToGroupDetail(id){
				uni.navigateTo({
					url:`/pagesA/group/detail?id=${id}`
				})
			},
			handleToGroupList(){
				uni.navigateTo({
					url:"/pagesA/group/index"
				})
			},
			getGroupList(){
				this.$http({
					url:"/pmsGroupConfig/paginQuery",
					method:"get",
					data:{
						groupStatus:1,
						pageNum:1,
						pageSize:4
					}
				}).then(data=>{
					this.groupList = data.list
				})
			},
			async setPlaceholderHeight() { 
				// 延时一定时间
				await uni.$u.sleep(300)
				// #ifndef APP-NVUE
				this.$uGetRect('.u-tabbar__content').then(({height = 50}) => { 
					uni.setStorageSync('placeholderHeight',height)
				})
				// #endif
			},
			getContent(){
				this.$http({
					url:"/home/content",
					method:"get",
				}).then(data=>{
					this.hotList = data.recommendProductList 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{ 
		padding-bottom: 88rpx;
	}
	.overlayBox{
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.img{
			width: 500rpx;
			height: 700rpx;
			margin-bottom: 30rpx;
			image{
				display: block;
				width: 500rpx;
				height: 700rpx;
			}
		}
	}
	.yBox{
		position: fixed;
		width: 156rpx;
		height: 48rpx;
		background: #000000;
		border-radius: 100rpx 100rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 99;
		image{
			width: 28rpx;
			height: 28rpx;
		}
	}
	 .banner{
		 width: 100%;
	 }
	 .bimg{
		 image{
			 width: 100%;
			 display: block;
		 }
	 }
	 .con3{
		 margin-top: 48rpx;
		 .vip{
			 margin-bottom: 56rpx;
			.logo{
				width: 228rpx;
				height: 60rpx;
				display: block;
				margin: 0 auto;
				margin-bottom: 20rpx;
			} 
			.text{
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				text{
					font-size: 20rpx;
					color: #333;
				}
				image{
					width: 18rpx;
					height: 18rpx;
					margin-left: 10rpx;
				}
			}
		 }
	 }
	 .index_more{
		 width: 184rpx;
		 height: 72rpx;
		 line-height: 72rpx;
		 text-align: center;
		 background: #FFFFFF;
		 font-size: 24rpx;
		 color: #333;
		 text-align: center;
		 border-radius: 37rpx;
		 border: 1rpx solid #E9E9E9;
		 margin: 0 auto;
		 margin-top: 48rpx;
	 }
	 .returnTop{
		 width: 220rpx;
		 height: 72rpx;
		 font-size: 24rpx;
		 margin: 0 auto;
		 margin-top: 84rpx;
		 background: #FFFFFF;
		 border-radius: 37rpx;
		 border: 1rpx solid #E9E9E9;
		 display: flex;
		 align-items: center;
		 justify-content: center;
		 image{
			 width: 24rpx;
			 height: 24rpx;
			 margin-left: 17rpx;
		 }
	 }
	 .con2{ 
		 padding: 60rpx 0;
		 .list{
			 padding: 24rpx;
			 display: flex;
			 flex-wrap: wrap;
			 justify-content: space-between;
			 padding-bottom: 0;
			 .item{
				 width: 49%;
				 background: #F8F8F8;
				 margin-bottom: 22rpx;
				 padding-bottom: 32rpx;
				 &:nth-child(3){
					 margin-bottom: 0;
				 }
				 &:nth-child(4){
				 	margin-bottom: 0;
				 }
				 .image{
				 	width: 100%;
				 	height: 310rpx;
				 	display: flex;
				 	align-items: center;
				 	justify-content: center;
					position: relative;
					.t{
						position: absolute;
						width: 80rpx;
						height: 32rpx;
						background: #FFFFFF;
						border-radius: 2rpx;
						text-align: center;
						line-height: 32rpx;
						font-size: 18rpx;
						color: #666666;
						left: 16rpx;
						top: 16rpx;
					}
				 	image{
				 		width: 200rpx;
				 		height: 200rpx;
				 	}
				 }
				 .text{
					padding: 0 30rpx;
					padding-top: 20rpx;
				 	.title{
				 		font-size: 24rpx;
				 		color: #333;
				 		text-align: center;
				 	}
				 	.dec{
				 		font-size: 22rpx;
				 		color: #999;
				 		margin-top: 8rpx;
				 		text-align: center;
				 	}
				 	.price{
				 		font-size: 30rpx;
				 		text-align: center;
						font-family: 'DINPro-Medium';
				 		color: #333;
				 	}
				 }
			 }
		 }
	 }
 .con1{
	 padding:0 30rpx;
	 padding-top: 40rpx;
	 padding-bottom: 40rpx;
	 .scroll-view_H {
	 		 
			margin-top: 22rpx;
	 		width: 100%;
			display: grid;
			  /* 固定两行，可以使用 auto 或固定高度，如 100px */
			  grid-template-rows: repeat(2, auto);
			  /* 元素按照列的顺序填充 */
			  grid-auto-flow: column;
			  /* 每一列的宽度，比如固定 150px，也可以使用 auto 或 1fr */
			  grid-auto-columns: 340rpx;
			  /* 设置元素之间的间隙 */
			  gap: 10px;
			  /* 当内容宽度超出时，启用横向滚动 */
			  overflow-x: auto;
			  /* 隐藏垂直方向滚动条（如果不需要的话） */
			  overflow-y: hidden;
			  /* 可选：为了更好的滚动体验 */
			  scroll-behavior: smooth;
			.item{
				display: inline-block;
				width: 340rpx;
				margin-right: 22rpx;
				padding-bottom: 32rpx;
				background: #F8F8F8;
				.image{
					width: 100%;
					height: 310rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 100%;
						height: 310rpx;
					}
				}
				.text{
					padding: 0 30rpx;
					padding-top: 20rpx;
					.title{
						font-size: 24rpx;
						color: #333;
						text-align: center;
					}
					.dec{
						font-size: 22rpx;
						color: #999;
						margin-top: 8rpx;
						text-align: center;
					}
					.price{
						font-size: 30rpx;
						font-family: 'DINPro-Medium';
						text-align: center;
						margin-top: 8rpx;
						color: #333;
					}
				}
			}
	 	}
 }
</style>
